const inp = document.querySelector(".inp");
const below = document.querySelector(".below");

inp.addEventListener("click", function () {
  below.classList.toggle("icon-xiala");
  below.classList.toggle("icon-shangla");
});
var layer = layui.layer;
var form = layui.form;
let pic = null;
var laydate = layui.laydate;
// layui.laydate.index = Date.now();
// let data = {
//   page: 1,
//   limit: 10,
//   start_time: "",
//   end_time: "",
//   title: "",
//   cateid: "",
// };

var q = {
  start_time: "",
  end_time: "",
  title: "",
  cateid: "",
  page: "1",
  limit: "10",
};

layui.use("laydate", function () {
  var laydate = layui.laydate;

  //日期范围
  laydate.render({
    elem: "#test6",
    //设置开始日期、日期日期的 input 选择器
    //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
    range: ["#test-startDate-1", "#test-endDate-1"],
  });

  //日期时间范围
  laydate.render({
    elem: "#test10",
    type: "datetime",
    range: true,
  });

  //自定义格式
  laydate.render({
    elem: "#test11",
    format: "yyyy年MM月dd日",
  });
  laydate.render({
    elem: "#test12",
    format: "dd/MM/yyyy",
  });
  laydate.render({
    elem: "#test13",
    format: "yyyyMMdd",
  });
  laydate.render({
    elem: "#test14",
    type: "time",
    format: "H点m分",
  });
  laydate.render({
    elem: "#test15",
    type: "month",
    range: "~",
    format: "yyyy-MM",
  });
  laydate.render({
    elem: "#test16",
    type: "datetime",
    range: "到",
    format: "yyyy年M月d日H时m分s秒",
  });
});

// 设置时间数据的处理
// 传入的参数是一个时间戳,即毫秒数
function ti(time) {
  // 获取对应的时间
  const date = new Date(time);
  const YYYY = date.getFullYear();
  const MM = SJ(date.getMonth() + 1);
  const DD = SJ(date.getDate());
  return `${YYYY}-${MM}-${DD}`;
}
// 设置补0
const SJ = (t) => (t >= 9 ? t : "0" + t);

//渲染页面
aterender();
function aterender() {
  axios({
    method: "GET",
    url: "http://124.223.14.236:8060/admin/ydd_article/list",
    headers: {
      "x-token": localStorage.getItem("x-token"),
    },
    params: q,
  }).then(function (res) {
    // console.log(res);
    if (res.status !== 200) return false;
    let dataStr = res.data.data.data;
    let count = res.data.data.count;
    // console.log(res.data.data.count);
    let curr = res.data.data.currentpage;
    let Strmap = dataStr.map((item, i) => {
      return `
 <tr>
 <td>${item.id}</td>
 <td>${item.title}</td>
 <td>${item.catename}</td>
 <td><img src="http://124.223.14.236:8060/${item.pic}" alt=""></td>
 <td>${ti(item.create_date)}</td>
 <td><div class="layui-unselect layui-form-switch layui-checkbox-disbaled layui-disabled" lay-skin="_switch"><em></em><i></i></div></td>
 <td><div class="layui-unselect layui-form-switch layui-checkbox-disbaled layui-disabled" lay-skin="_switch"><em></em><i></i></div></td>
 <td><span class="span">已发布</span></td>
 <td class="td">
  <button data-id="${
    item.id
  }" id="btnAddCate" class="Bbutton circle" ><i class="iconfont icon-bi"></i></button>
 <button data-id="${
   item.id
 }" id="btndelCate" type="button" class="layui-btn layui-btn-normal layui-btn-sm Bbutton circle"><i class="iconfont icon-shanchu"></i></button>
 </td>
 </tr>
 `;
    });
    $("#tbody").html(Strmap);
    // 调用分页函数
    renderPage(count, curr);
  });
}
//筛选
$("#form").on("submit", function (e) {
  e.preventDefault();
  q.title = $("#Inp").val();
  axios({
    method: "GET",
    url: "http://124.223.14.236:8060/admin/ydd_article/list",
    params: { title: $("#Inp").val() },
    headers: {
      "x-token": localStorage.getItem("x-token"),
    },
  }).then(function (res) {
    // console.log(res.data.data);
    let dataStr = res.data.data.data;
    // console.log(dataStr);
    let Strmap = dataStr.map((item, i) => {
      return `
 <tr>
 <td>${item.id}</td>
 <td>${item.title}</td>
 <td>${item.catename}</td>
 <td><img src="http://124.223.14.236:8060/${item.pic}" alt=""></td>
 <td>${ti(item.create_date)}</td>
 <td><div class="layui-unselect layui-form-switch layui-checkbox-disbaled layui-disabled" lay-skin="_switch"><em></em><i></i></div></td>
 <td><div class="layui-unselect layui-form-switch layui-checkbox-disbaled layui-disabled" lay-skin="_switch"><em></em><i></i></div></td>
 <td><span class="span">已发布</span></td>
 <td class="td">
  <button data-id="${
    item.id
  }" id="btnAddCate" class="Bbutton circle" ><i class="iconfont icon-bi"></i></button>
 <button data-id="${
   item.id
 }" id="btndelCate" type="button" class="layui-btn layui-btn-normal layui-btn-sm Bbutton circle"><i class="iconfont icon-shanchu"></i></button>
 </td>
 </tr>
 `;
    });
    $("#tbody").html(Strmap);
    // console.log(htmlStr);
    // $('tbody').html(htmlStr);
    // getPaging(res.data.data.count);
    // renderPage()
  });
});

// 删除模块

$("tbody").on("click", "#btndelCate", function () {
  let id = $(this).attr("data-id");
  layer.confirm(
    "是否删除该条分类？",
    { icon: 3, title: "提示" },
    function (index) {
      axios({
        method: "GET",
        url: "http://124.223.14.236:8060/admin/ydd_article/del",
        params: {
          id: id,
        },
        headers: {
          "x-token": localStorage.getItem("x-token"),
        },
      }).then(function (res) {
        console.log(res.data.data);
        if (res.status !== 200) {
          return layer.msg("删除失败！");
        }
        layer.msg("删除成功！");
        aterender();
      });
      layer.close(index);
    }
  );
});

// 设置重置按钮的请求
$("#resetting").on("click", function () {
  data = {
    page: 1,
    limit: 10,
    start_time: "",
    end_time: "",
    title: "",
    cateid: "",
  };
  aterender();
});

//修改
let id = null;
$("tbody").on("click", "#btnAddCate", function (e) {
  e.preventDefault();
  let id = $(this).attr("data-id");
  let time_text1 = ti(Date.parse(new Date()));
  // console.log(time_text1);
  axios({
    method: "GET",
    url: `http://124.223.14.236:8060/admin/ydd_article/rowInfo?id=${id}`,
    headers: {
      "x-token": localStorage.getItem("x-token"),
    },
  }).then(function (res) {
    // console.log(res);
    layerIndex = layer.open({
      type: 1,
      title: "修改文章",
      area: ["850px", "550px"],
      content: $("#addTplList").html(),
    });
    // $('#option').html(res.data.data.cateid)
    form.val("changeFormData", {
      title: res.data.data.title,
      author: res.data.data.author,
      city: res.data.data.city,
      click: res.data.data.click,
      time_text1: time_text1,
      lovenum: res.data.data.lovenum,
      file: res.data.data.file,
      tags: res.data.data.tags,
    });
  });
});

$("body").on("click", "#addFile2", function () {
  $("#files")[0].click();
  // console.log(111);
});

// 定义渲染分页的方法
const laypage = layui.laypage;
function renderPage(count, curr) {
  // 调用laypage.render方法渲染分页的结构
  laypage.render({
    elem: "pageBox", // 绑定的容器id
    count: count, // 数据总数
    limit: 10, // 每页显示的几条数据
    curr: curr, // 默认选中的分页
    // 自定义不同的功能
    layout: ["count", "limit", "prev", "page", "next", "skip"],
    limits: [2, 4, 6, 8, 10],
    jump: function (obj, first) {
      // 把获取到的最新的页码值, 赋值给 q 的 q.pagenum
      // q.pagenum = obj.curr;
      q.page = obj.curr;
      // 把获取到的最新的每页显示几条数据, 赋值给 q 的 q.pagesize
      // q.pagesize = obj.limit;
      q.limit = obj.limit;
      // 如果first值为true, 代表着是首次渲染分页结构,并且调用了jump,不需要调用 initTable()
      // 如果first值为false, 不是首次渲染分页结构, 代表着是用户点击页码进行的切换, 此时再发送获取文章列表的请求 initTable()
      if (!first) {
        aterender();
      }
    },
  });
}

$("#adddata").on("click",  function (e) {
  e.preventDefault();
    layerIndex = layer.open({
      type: 1,
      title: "修改文章",
      area: ["850px", "550px"],
      content: $("#addTplList2").html(),
    });
});